<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-on:keyup="submit">
        <input v-on:keyup.97="submit" value="a">
        <button @keyup.enter="submit"  autofocus="">蹦</button>

        <!-- 1. 只要CTRL键值标识存在就行，是否有它们存在不重要 —— 模糊 -->
        <button @click.ctrl="submit">一道伤疤</button>
        <!-- 2. 具体 —— 我只识别点击 有其控制/上档/修改我就不听 -->
        <button @click.exact="submit">笑得甜蜜</button>
        <!-- 3. 精确 —— 如果存在它们我也不听 -->
        <button @click.ctrl.exact="submit">笑得不甜蜜</button>
        
        <!-- 分别是鼠标左/中/右键按下后触发执行时间 -->
        <button @click.left="left">left</button>
        <button @click.right="left">right</button>
        <button @click.middle="left">middle</button>

        <button type="button" autofocus onclick="alert('Hello world!')">点我</button>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data(){
                return{}
            },
            methods:{
                submit: function(){
                    console.log( '老胡在我身后')
                },
                left: function(){
                    console.log('你好');
                }
            }
        })
    </script>
</body>
</html>